<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script type="text/javascript" src="../js/vue-2.6.12.js"></script>
<div id="app">
    <h2>{{num}}</h2>
    <!-- 2 绑定自定义事件处理函数，监听子组件的事件触发 change-count
		当子组件触发事件后，执行handleChange事件处理函数，
		$emit发送的数据将成为handleChange的实参
	-->
    <counter :count="num" @change-count="handleChange"></counter>
</div>

<script>
    Vue.component("counter",{
        template:`
            <div>
                <button @click="increment">点我自增</button>
                <span>{{count}}</span>
                <button @click="decrement">点我自减</button>
             </div>`,
        props:["count"],
        methods:{
            increment(){
                this.count++;
                //1 子组件中通过$emit触发父组件中的自定义事件，并发送数据
                this.$emit("change-count",this.count);
            },
            decrement(){
                this.count--;
                //1 子组件中通过$emit触发父组件中的自定义事件，并发送数据
                this.$emit("change-count",this.count);
            }
        }
    })

    const vm = new Vue({
        el:"#app",
        data:{
            num:0
        },
        methods:{
            handleChange(value){
                this.num = value;
            }
        }
    })
</script>
</body>
</html>